<template>
  <el-header>
    <span class="header_left">智能客服管理后台</span>
    <span class="header_right">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          {{ userInfo.name || 'admin'
          }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goPath(1)">基础信息</el-dropdown-item>
            <el-dropdown-item @click="goPath(2)">修改密码</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span style="margin: 0 16px; font-size: 20px; color: #279c85">|</span>
      <el-icon :size="24" style="cursor: pointer" @click="loginOut">
        <SwitchButton />
      </el-icon>
    </span>
  </el-header>
</template>

<script lang="ts" setup>
import openMsgBox from '@/hooks/messageBox.js'
import store from '@/store'
const userInfo = computed(() => store.getters.userInfo)
const router = useRouter()
const loginOut = () => {
  let data = {
    title: '退出确认',
    tips: '确定要退出登录吗',
    path: '/login',
  }
  openMsgBox(data, () => {
    router.push('/')
  })
}
const goPath = (e) => {
  router.push({
    path: '/accountSet/tabs',
    query: {
      type: e,
    },
  })
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: rgba(26, 188, 156, 0.898039215686275);
  color: #fff;
  @include flex-space-between;

  .header_left {
    font-size: 18px;
    font-weight: bold;
  }

  .header_right {
    @include flex-align-center;

    .el-dropdown {
      color: #fff;
      cursor: pointer;
    }
  }
}

:deep(.el-dropdown-menu__item) {
  &:hover {
    background-color: #1abc9c !important;
    color: #fff;
  }
}
</style>
